﻿@{
    ViewBag.Title = "Detail of Order " + @Html.ViewBag.OrderNo;
}
<style>
    table
    {
        border-collapse: collapse;
    }

    table, td, th
    {
        padding: 5px 5px;
    }
</style>
<h2>Tracking detail of Order @Html.ViewBag.OrderNo</h2>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Route</title>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script type="text/javascript">
        // This example creates a 2-pixel-wide red polyline showing
        // the path of William Kingsford Smith's first trans-Pacific flight between
        // Oakland, CA, and Brisbane, Australia.

        function initialize() {

            var mapOptions = {
                zoom: 4,
                center: new google.maps.LatLng(10, 100),
                mapTypeId: google.maps.MapTypeId.TERRAIN
            };

            var map = new google.maps.Map(document.getElementById('map-canvas'),
                mapOptions);

            var flightPlanCoordinates = [];

            @foreach (List<double> items in ViewBag.Coordinates)
            {
                <text>
            var lat = '@Html.Raw(Json.Encode(items[0]))';
            var lon = '@Html.Raw(Json.Encode(items[1]))';
            flightPlanCoordinates.push(new google.maps.LatLng(lat, lon));
                </text>                             	        
            };

            var flightPath = new google.maps.Polyline({
                path: flightPlanCoordinates,
                geodesic: true,
                strokeColor: '#FF0000',
                strokeOpacity: 1.0,
                strokeWeight: 2
            });

            var shipLat = '@Html.Raw(Json.Encode(ViewBag.ShipLat))';
            var shipLon = '@Html.Raw(Json.Encode(ViewBag.ShipLon))';
            var shipLatlng = new google.maps.LatLng(shipLat, shipLon);

            var marker = new google.maps.Marker({
                position: shipLatlng,
                map: map,
                title: 'Your Order is here!'
            });

            flightPath.setMap(map);
        }

        google.maps.event.addDomListener(window, 'load', initialize);

    </script>
</head>

<body>
    <div id="Info" style="width: 500px; height: auto">
        <table class="table table-striped">
            <tr>
                <td>Wanted Delivery Date</td>
                <td>:-</td>
                <td>@Html.ViewBag.WantedDelDate</td>
            </tr>
            <tr>
                <td>Shipment Date</td>
                <td>:-</td>
                <td>@Html.ViewBag.ShipmentDate</td>
            </tr>
            <tr>
                <td>Shipping Time</td>
                <td>:-</td>
                <td>@Html.ViewBag.ShippingTime hours</td>
            </tr>
            <tr>
                <td>Estimated Delivery Date</td>
                <td>:-</td>
                <td>@Html.ViewBag.EstimatedDelDate</td>
            </tr>
            <tr>
                <td>Prediction</td>
                <td>:-</td>
                <td>@Html.ViewBag.Prediction</td>
            </tr>
        </table>
    </div>
    <p></p>

    @if (ViewBag.Weather != null)
    {
        <div style="width: 900px; height: auto">
            <table class="table table-condensed">
                <tr>
                    @foreach (FreightSoft.Classes.WeatherDetails weather_ in ViewBag.Weather)
                    {
                        <td>@weather_.WeatherDay</td>            
                    }
                </tr>
                <tr>
                    @foreach (FreightSoft.Classes.WeatherDetails weather_ in ViewBag.Weather)
                    {
                        <td>@weather_.Location</td>            
                    }
                </tr>
                <tr>
                    @foreach (FreightSoft.Classes.WeatherDetails weather_ in ViewBag.Weather)
                    {
                        <td>
                            <img src='@weather_.WeatherIcon'/></td>            
                    }
                </tr>
                <tr>
                    @foreach (FreightSoft.Classes.WeatherDetails weather_ in ViewBag.Weather)
                    {
                        <td>@weather_.Weather</td>            
                    }
                </tr>
            </table>
        </div> 
    }
    <div id="map-canvas" style="width: 1000px; height: 600px"></div>
</body>
